<template>
	<s-layout :title="state.title" :bgStyle="{ color: '#000000' }" opacityBgUi="bg-black" color="#fff">
		<su-sticky bgColor="#000000">
		  <su-tabs
		    class="su-tabs"
		    :list="tabMaps"
		    :scrollable="false"
		    @change="onTabsChange"
		    :current="state.currentTab"
			:activeStyle="{color: '#fff'}"
			:inactiveStyle="{color: '#fff'}"
		  ></su-tabs>
		</su-sticky>
		
		<view class="detail-swiper-selector" v-if="state.goodsSwiper.length > 0">
			<!-- 汽车轮播图  -->
			<su-virtual-swiper
			  isPreview
			  circular
			  :list="state.goodsSwiper"
			  dotStyle="tag"
			  imageMode="widthFix"
			  dotCur="bg-mask-40"
			  :seizeHeight="750"
			/>
		</view>
		
		<su-fixed bottom placeholder bg="bg-black">
			<view class="bottom-button">
				<view class="ss-flex car-color-type car-type" @click="showDrawerType(1)">
					<view class="ss-line-1">蔚来ET7 2023款 100kWh 签名版</view>
					<uni-icons type="down" size="14" color="#fff"></uni-icons>
				</view>
				<view class="ss-flex car-color-type" @click="showDrawerType(2)">
					<view>全部颜色</view>
					<uni-icons type="down" size="14" color="#fff"></uni-icons>
				</view>
			</view>
		</su-fixed>
		
		<drawer-type ref="showDrawerTypeRef" @select="selectType" bg="bg-black"></drawer-type>
	</s-layout>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import sheep from '@/sheep';
	import DrawerType from './components/drawer-type';
	
	const state = reactive({
		title: '',
		car_id: '',
		currentTab: 0,
		goodsSwiper: [],
		carList: []
	})
	const tabMaps = [
		{ name: '外观', value: '1'},
		{ name: '内饰', value: '2'},
		{ name: '空间', value: '3'},
		{ name: '细节', value: '4'},
	]
	function onTabsChange(e) {
		state.currentTab = e.index
	}
	
	// 选择车辆
	const showDrawerTypeRef = ref(null)
	function showDrawerType(val) {
		showDrawerTypeRef.value.showDrawerType(val);
	}
	function selectType(item) {
		console.log(item)
	}
	
	async function getCarDetails() {
		const res = await sheep.$api.car.carSku({type: 1, ids: state.car_id})
		state.goodsSwiper = res.data.image.map(src => ({type: 'image', src}))
		state.carList = res.data.data
	}
	
	onLoad(async (options) => {
		state.title = options.title
		state.car_id = options.car_id
		getCarDetails()
	});
</script>

<style lang="scss" scoped>
	.su-tabs {
		background-color: #000;
	}
	.bottom-button {
		display: flex;
		padding: 20rpx 0;
	}
	.car-type {
		width: 65%;
	}
	.car-color-type {
		font-size: 26rpx;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		color: #fff;
	}
</style>